<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>盒子 1</div>
    <div>盒子 2</div>
    <div>盒子 3</div>
    <script>
        // 1.查找元素1个,给的是选择器(字符串)
        // document.querySelector 内置的对象的方法
        const divDom=document.querySelector('div')
        console.log(divDom)
        // 打印 dom 对象,建议用console.dir
        console.dir(divDom)
        setTimeout(()=>{
            // 2. 修改元素
            // 改完之后页面会更新
            divDom.innerHTML='教练,我想踢足球'
        },3000)

        // 2. 查找多个元素
        // divArr 有 length 属性,有 forEach
        // 但是没有 push,filter 等数组的其他方法
        // 所以他叫[伪数组],有 length 属性,通过下标取值
        const divArr=document.querySelectorAll('div')
        console.log(divArr)
        setTimeout(()=>{
            // divArr[2].innerHTML='666'
            divArr.forEach(v=>{
                v.innerHTML='鸽鸽下蛋你别吃'
            })
        },4000)
    </script>
</body>
</html>